<template>
  <el-dialog
    :title="types == 'add' ? '设置商品信息' : '编辑商品信息'"
    :visible.sync="visible"
    :before-close="handleClose"
    width="80%"
  >
    <el-form :model="form" label-width="100px">
      <el-form-item v-if="form.soft == 'single'" label="商品名称">{{
        form.goods_name
      }}</el-form-item>
      <el-form-item v-if="form.soft == 'single'" label="销售价">{{
        form.lprice
      }}</el-form-item>
      <el-form-item v-if="form.soft == 'single'" label="销售价"
        >{{ form.sprice }}
        <el-button type="text" @click="open">去修改</el-button>
      </el-form-item>

      <el-form-item label="佣金比例">
        <el-radio-group v-model="form.type" @change="radioTag">
          <el-radio :label="1">使用默认</el-radio>
          <el-radio :label="2">自定义设置</el-radio>
        </el-radio-group>
        <table class="tabless">
          <tr>
            <td v-for="(item, index) in form.level" :key="index">
              <!-- <el-form-item :prop="'item.' + index + '.name'"
                              :rules='{ required: true, message: "请输入等级名称", trigger: "blur" }'> -->
              <div class="tdDiv">
                <span v-if="index === 0">{{ item.name }}</span>
                <el-input
                  v-else
                  v-model="item.name"
                  placeholder="请输入等级名称"
                  :maxlength="5"
                  :disabled="form.type === 1"
                  style="width:80%;"
                  show-word-limit
                  size="medium"
                ></el-input>
              </div>

              <!-- </el-form-item> -->
            </td>
          </tr>
          <tr>
            <td v-for="(item, index) in form.level" :key="index">
              <!-- <el-form-item :prop="'item.' + index + '.bili'"
                              :rules='{ required: true, message: "请输入等级比例", trigger: "blur" }'> -->
              <div class="tdDiv">
                <span v-if="index === 0">{{ item.bili }}</span>
                <el-input-number
                  v-else
                  v-model="item.bili"
                  placeholder="请输入等级比例"
                  :min="0"
                  :max="100"
                  :disabled="form.type === 1"
                  :controls="false"
                  :precision="0"
                  style="width:80%;"
                  size="medium"
                ></el-input-number>
                <!-- </el-form-item> -->
              </div>
            </td>
          </tr>
        </table>
      </el-form-item>
      <el-form-item label="推广排序">
        <el-input-number
          v-model="form.sort"
          :min="0"
          :step="1"
          :precision="0"
          :controls="false"
          step-strictly
          size="medium"
        ></el-input-number>
        <span style="color:#909399;"
          >按排序值倒序排列，排序值相同按添加商品顺序</span
        >
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  ADDDISTRIBUTEGOODS,
  DEFAULTBILI,
  EDITDISTRIBUTEGOODS
} from "../../service";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    types: {
      type: String,
      default: "add"
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        goods_ids: "",
        goods_name: "",
        lprice: "",
        sprice: "",
        type: 1,
        sort: 0,
        soft: "single",
        level: []
      },
      defaultArr: []
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.form.soft = this.formData.soft;
        this.form.goods_ids = this.formData.goods_ids;
        this.form.sort = this.formData.sort;
        if (this.formData.soft === "single") {
          this.form.goods_name = this.formData.goods_name;
          this.form.lprice = this.formData.lprice;
          this.form.sprice = this.formData.sprice;
          if (this.types === "edit") {
            this.form.type = this.formData.type;
            this.form.level = this.formData.level;
            this.form.level.unshift({
              name: "分销等级名称",
              lv: 0,
              bili: "分销等级比例"
            });
          }
        } else {
          this.form.type = 1;
        }
        this.default();
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("dialogOut");
    },
    open() {
      window.open("/goodsList");
    },
    radioTag(v) {
      this.form.level = [];
      if (v === 1) {
        this.form.level = this.defaultArr;
      } else {
        if (this.types === "add") {
          this.form.level = [
            { name: "分销等级名称", lv: 0, bili: "分销等级比例" },
            { name: "一级", lv: 1, bili: "" },
            { name: "二级", lv: 2, bili: "" },
            { name: "三级", lv: 3, bili: "" },
            { name: "四级", lv: 4, bili: "" },
            { name: "五级", lv: 5, bili: "" }
          ];
        } else {
          if (this.form.soft === "all") {
            this.form.level = [
              { name: "分销等级名称", lv: 0, bili: "分销等级比例" },
              { name: "一级", lv: 1, bili: "" },
              { name: "二级", lv: 2, bili: "" },
              { name: "三级", lv: 3, bili: "" },
              { name: "四级", lv: 4, bili: "" },
              { name: "五级", lv: 5, bili: "" }
            ];
          } else {
            this.form.level = [
              { name: "分销等级名称", lv: 0, bili: "分销等级比例" }
            ];
            this.form.level = [...this.form.level, ...this.formData.level];
          }
        }
      }
    },
    async submit() {
      let soft = true;
      await this.form.level.forEach(ele => {
        if (ele.name === "") {
          this.$message.error("分销等级名称不能为空！");
          soft = false;
        }
        if (ele.bili === "" || ele.bili === undefined) {
          this.$message.error("分销等级比例不能为空！");
          soft = false;
        }
        if (this.types === "edit") {
          delete ele.distribute_lv_id;
          delete ele.low_goods_price;
          delete ele.up_goods_price;
          delete ele.members;
        }
      });
      if (soft) {
        this.form.level.splice(0, 1);
        if (this.types === "edit") {
          await EDITDISTRIBUTEGOODS({
            distribute_goods_ids: this.form.goods_ids,
            type: this.form.type,
            json: this.form.type !== 1 ? JSON.stringify(this.form.level) : "",
            sort: this.form.sort
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("dialogOut");
            } else {
              this.form.level.unshift({
                name: "分销等级名称",
                lv: 0,
                bili: "分销等级比例"
              });
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          await ADDDISTRIBUTEGOODS({
            goods_ids: this.form.goods_ids,
            type: this.form.type,
            json: this.form.type !== 1 ? JSON.stringify(this.form.level) : "",
            sort: this.form.sort
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("dialogOut");
            } else {
              this.form.level.unshift({
                name: "分销等级名称",
                lv: 0,
                bili: "分销等级比例"
              });
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      }
    },
    async default() {
      await DEFAULTBILI().then(({ code, data }) => {
        if (code === 200) {
          data.unshift({ name: "分销等级名称", lv: 0, bili: "分销等级比例" });
          this.defaultArr = data;
          if (this.form.type === 1) this.form.level = data;
        }
        // this.$message({
        //   message: msg,
        //   type: code === 200 ? 'success' : 'error'
        // })
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tabless {
  width: 100%;
  border: 1px solid rgb(248, 245, 245);
  border-radius: 6px;
  text-align: center;
  .tdDiv {
    padding: 10px;
    border: 1px solid rgb(248, 245, 245);
  }
}
</style>
